<html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></script>
        <script src="node_modules/vue/dist/vue.js"></script>
        <script src="node_modules/vue-resource/dist/vue-resource.js"></script>
    </head>
    <body>
        <div id="app" class="container">
            <h1>vue-resource插件讲解</h1>
            <a href="javascript:" class="btn btn-primary" v-on:click="get">get请求</a>
            <a href="javascript:" class="btn btn-primary" @click="post">post请求</a>
            <a href="javascript:" class="btn btn-primary" @click="jsonp">jsonp请求</a>
            <a href="javascript:" class="btn btn-primary" @click="http">ajax请求</a>
            <div>{{ msg }}</div>
        </div>
    </body>
    <script>
        new Vue({
            el:"#app",
            data:{
                msg:''
            },
            mounted:function(){
                Vue.http.interceptors.push(function(request,next){
                    console.log("request init")
                    next(function(response){
                        console.log("request after")
                      return response;
                    })
                })
            },
            methods:{
                get:function () {
                    this.$http.get("packag1e.json",{
                        params:{
                            userid:"101"
                        },
                        headers:{
                          token:"wedw545455"          
                        }
                    }).then(res =>{
                        this.msg = res.data
                    },error =>{
                        this.msg =error
                    });
                },
                post:function(){
                   this.$http.post("package.json",
                   {
                       userid:"102"
                    },{
                        headers:{
                            access_token:"abc"
                        }
                    }).then(function(res){
                        this.msg = res.data    
                    });     
                },
                jsonp:function(){
                    this.$http.jsonp
                },
                http:function(){
                    this.$http({
                       url:'package.json',
                       params:{
                          userId:103 
                       },
                       headers:{
                         token:"123"   
                       },
                       timeout:5,
                       before:function(){
                           console.log('请求之前')
                       }     
                    }).then(res=>{
                        this.msg=this.data
                    });
                }
            }
        })
    </script>
</html>